.home_content{
    width: 100%;
}
.banner_conetnt_outside{
    width: 100%;
    height: 700px;
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
}
.banner_content_center{
    width: 1240px;
    position: relative;
    display: flex;
    p{
        width: 470px;
    }
}
.banner_left{
    margin-top: 217px;
}
.first_image{
    background-image: url("./../static/images/banner.png");
}
.second_image{
    background-image: url("./../static/images/banner.png");
}
.banner_title{
    font-family: "GlowSansTC_Medium";
    font-size: 47px;
    line-height: 47px;
    font-weight: normal;
    color: #FFFFFF;
    letter-spacing: 4px;
}
.banner_en_title{
    font-family: "DIN";
    font-size: 17px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 17px;
    letter-spacing: 10px;
    margin-top: 10px;
}
.banner_text{
    font-size: 26px;
    font-family: "GlowSansTC_Light";
    font-weight: normal;
    color: #CCCCFF;
    line-height: 42px;
    margin-top: 48px;
}
.banner_button_more{
    border: none;
    background: none;
    outline: none;
    width: 130px;
    height: 44px;
    background: #5A64F6;
    border-radius: 22px;
    font-size: 20px;
    font-family: "GlowSansTC_Light";
    font-weight: normal;
    color: #FFFFFF;
    line-height: 28px;
    margin-top: 48px;
    cursor: pointer;
}
.banner_right{
    width: 700px;
    height: 700px;
    position: absolute;
    top: 138px;
    left: 673px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.right_image{
    background-image: url("./../static/images/home/banner_right.png");
}

.active_conent{
    display: flex;
    position: absolute;
    left: 0;
    bottom: 64px;
    .active_conent_first,.active_conent_second,.active_conent_third{
        width: 130px;
        height: 3px;
        background: #5A64F6;
        background: #fff;
        margin-right: 36px;
    }
}

.conent_have_bgimg{
    width: 100%;
    height: auto;
    background:url("./../static/images/bg-image.png") no-repeat center;
    background-size: cover;
    padding-top: 48*3px;
    display: flex;
    align-items: center;
    flex-direction: column;
    // padding-bottom: 54px;
}
.product_title,.project_plan_title{
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    font-family: "HUXIAOBO";
    font-weight: 400;
    color: #28272C;
    letter-spacing: 2px;
    }
.product_title_en,.project_plan_title_en{
    text-align: center;
    font-size: 16px;
    font-family: "DIN";
    font-weight: 400;
    color: #5A64F6;
}
.product_bg{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("./../static/images/home/wave.png") no-repeat;
    background-position: bottom;
    background-size: 100% 70%;
    margin-bottom: 96px;
}
.product_classify{
    width: 1240px;
    display: flex;
    justify-content: space-around;
    z-index: 2;
    margin-top: 72px;
    .product_classify_content{
        width: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .product_title_img{
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .product_classify_insideimg_first{
        width:100%;
        height: 100%;
        background-image: url("./../static/images/home/4.png");
        background-size: auto;
    }
    .product_classify_outerimg_first{
        width: 173px;
        height: 95px;
        background-image: url("./../static/images/home/bottom.png");
        background-size: auto;
    }
   
    .product_classify_insideimg_second{
        width: 173px;
        height: 95px;
        background-image: url("./../static/images/home/2.png");
        background-size: auto;

    }
    .product_classify_insideimg_third{
        width: 173px;
        height: 95px;
        background-image: url("./../static/images/home/1.png");
        background-size: auto;

    }
    .product_classify_insideimg_fourth{
        width: 173px;
        height: 95px;
        background-image: url("./../static/images/home/3.png");
        background-size: auto;

    }
    .product_classify_direction{
        width: 116px;
        height: 10px;
        background: url("./../static//images/home/choose.png") no-repeat center;
        background-size: cover;
        opacity: 0;
    }
    .product_classify_direction_show{
        opacity: 1;
    }
    .product_classify_title{
        font-size: 24px;
        font-family: "GlowSansTC_Light";
        color: #666;
        font-weight: normal;
        line-height: 60px;
        margin-bottom: 8px
    }
    .product_classify_title_click{
        font-size: 30px;
        font-family: "GlowSansTC_Medium";
        color: #28292D;
        
    }
}
.product_classify_content_detail{
    width: 1240px;
    margin-top: -3px;
    display: flex;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    .classify_content{
        width: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 64px;
        padding-bottom: 48px;
    }
    .classify_img{
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .classify_title{
        font-size: 20px;
        line-height: 20px;
        font-family: "GlowSansTC_Medium";
        font-weight: normal;
        color: #333333;
        margin-top: 12px;
        margin-bottom: 22px;
    }
    .classify_sapcing{
        width: 22px;
        height: 2px;
        box-sizing: border-box;
        background: #5963F5;
        margin-bottom: 24px;
    }
    .classify_text{
        text-align: center;
        font-size: 16px;
        font-family: "GlowSansTC_Light";
        font-weight: normal;
        color: #656565;
        line-height: 20px;
    }




    .classify_firstcontent_first{
        background-image: url("./../static/images/home/shape.png");
    }
    .classify_firstcontent_second{
        background-image: url("./../static/images/home/item.png");
    }
    .classify_firstcontent_third{
        background-image: url("./../static/images/home/inserc.png");
    }
    .classify_firstcontent_fourth{
        background-image: url("./../static/images/home/menu.png");
    }



    .classify_secondcontent_first{
        background-image: url("./../static/images/home/internet.png");
    }
    .classify_secondcontent_second{
        background-image: url("./../static/images/home/equipment.png");
    }
    .classify_secondcontent_third{
        background-image: url("./../static/images/home/math.png");
    }
    .classify_secondcontent_fourth{
        background-image: url("./../static/images/home/serve.png");
    }


    .classify_thirdcontent_first{
        background-image: url("./../static/images/home/face.png");
    }
    .classify_thirdcontent_second{
        background-image: url("./../static/images/home/car.png");
    }
    .classify_thirdcontent_third{
        background-image: url("./../static/images/home/body.png");
    }
    .classify_thirdcontent_fourth{
        background-image: url("./../static/images/home/active.png");
    }




    .classify_fourthcontent_first{
        background-image: url("./../static/images/home/nav.png");
    }

    .classify_fourthcontent_second{
        background-image: url("./../static/images/home/sence.png");
    }
    .classify_fourthcontent_third{
        background-image: url("./../static/images/home/interface.png");
    }
    .classify_fourthcontentt_fourth{
        background-image: url("./../static/images/home/actual.png");
    }

    
}


@keyframes flow{
    0%   {margin-top: 0;}
    10%   {margin-top: -4px;}
    20%   {margin-top: -8px;}
    30%   {margin-top: -12px;}
    40%  {margin-top: -16px;}
    50%  {margin-top: -20px;}
    60%  {margin-top: -16px;}
    70%  {margin-top: -12px;}
    80%  {margin-top: -8px;}
    90%  {margin-top: -4px;}
    100%  {margin-top: 0;}
}
.active_title_img{
    animation: flow 3s linear infinite;
}

.project_plan{
    width: 1240px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.project_plan_title_en{
    letter-spacing: 8px;
}
.project_plan_content{
    width: 1240px;
    margin-top: 48px;
    .project_plan_content_img{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .project_left{
        width: 49%; 
        background-color: #FFFFFF;
        border-radius: 10px;
        img{
            height: 450px;
            width: 100%;
            object-fit: cover;
        }
    }
    .project_content_explian{
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 48px;
    }
    .project_content_title{
        font-size: 20px;
        font-family: "GlowSansTC_Medium";
        font-weight: normal;
        color: #242222;
        line-height: 48px;
    }
    .project_content_detail{
        font-size: 16px;
        font-family: "GlowSansTC_Light";
        font-weight: normal;
        color: #999999;
        line-height: 24px;
    }
    .project_button{
        display: flex;
        justify-content: space-between;
        margin-top:48px;
    }
    .button_project{
        border: none;
        background: none;
        outline: none;
        width: 226px;
        height: 44px;
        background: #5963F5;
        border-radius: 22px;
        color: #FFFFFF;
        font-size: 20px;
        font-family: "GlowSansTC_Light";
        letter-spacing: 2px;
        cursor: pointer;
    }
    .project_page{
        display: flex;
    }
    .project_page_up,.project_page_down{
        width: 44px;
        height: 44px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url("./../static/images/home/button_active.png");
    }
    .project_page_up{
        transform: rotateY(180deg);
        margin-right: 32px;
    }
}

.patener_content{
    width: 100%;
    margin-top: 96px;
    margin-bottom: 96px;
    .partener_content_title{
        width: 100%;
        height: 515px;
        display: flex;
        flex-direction: column;
        background: url("./../static/images/home/partner.png") no-repeat center;
        background-size: cover;
    }
    .partner_title{
        font-size: 30px;
        font-family: "HUXIAOBO";
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing: 2px;
        text-align: center;
        margin-top: 48px;
    }
    .partner_title_en{
        font-size: 16px;
        font-family: "DIN";
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.9;
        letter-spacing: 2px;
        text-align: center;
        margin-top: 6px;
    }
    .partner_connect{
        width: 938px;
        background: #FFFFFF;
        border-radius: 10px;
        padding: 32px;
        margin: auto;
        margin-top: -165px;
        display: flex;
        img{
            object-fit: cover;
            border-radius: 5px;
        }
    }
    .partner_form{
        margin-left: 32px;
        p{
            font-size: 24px;
            font-family: "GlowSansTC_Medium";
            font-weight: normal;
            color: #333333;
            line-height: 24px;
        }
    }
    .partner_input_first{
        margin-top: 20px; 
    } 
    .partner_input{
        width: 351px;
        height: 50px;
        border: 1px solid #999999;
        box-shadow: 1px 1px #cccc;
        border-radius: 10px;
        display: flex;
        align-items: center;
        padding: 10px 16px;
        margin-top: 30px;

        input{
            border: none;
            background: none;
            outline: none;
            height: 38px;
            line-height: 38px;
            margin-left: 20px;
            flex: 1;
        } 
        span:nth-of-type(2){
            font-size: 16px;
            font-family: "GlowSansTC_Light";
            font-weight: normal;
            color: #666666;
            opacity: 0;
        } 
    }
    .partner_input:focus{
        border: 1px solid #5A64F6;
    }
    .del_input{
        width: 22px;
        height: 22px;
        background: url("./../static/images/home/del.png") no-repeat center;
        background-size: cover;
    }
    .clear_input,.confirm_input{
        width: 150px;
        height: 44px;
        border: 1px solid #5A64F6;
        border-radius: 22px;
        font-size: 20px;
        font-family: "GlowSansTC_Light";
        font-weight: normal;
        color: #5A64F6;
        line-height: 28px;
        background: #FFFFFF;
        outline: none;
        cursor: pointer;
    }
    .partner_button{
        border: none;
        box-shadow: none;
        justify-content: space-between;
        padding: 0;
        outline: none;
        cursor: pointer;
    }
    .confirm_input{
        background: #5A64F6;
        color: #FFFFFF;
    }
}
.aboutus_title{
    font-size: 30px;
    font-family: "HUXIAOBO";
    font-weight: 400;
    color: #28272C;
    letter-spacing: 2px;
}
.aboutus_title_en{
    font-size: 16px;
    line-height: 16px;
    font-family: "DIN";
    font-weight: 400;
    color: #5A64F6;
    letter-spacing: 6px;
    margin-top: 6px;
}
.aboutus_content{
    display: flex;
    margin-top: 48px;
    .aboutus_left_img{
        width: 41%;
        height: 334px;
        margin-right: 45px;
        object-fit: cover;
    }
    .aboutus_right_content{
        width: 728px;
    }
    .company_introduce{
        font-size: 18px;
        font-family: "GlowSansTC_Light";
        font-weight: normal;
        color: #333333;
        line-height: 24px;
        margin-bottom: 48px;
        filter: brightness(0.5);
    }
    .aboutus_detail_content{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .aboutus_detail{
        display: flex;
        flex-direction: column;
        width: 300px;
        margin-bottom: 42px;
    }
    .aboutus_detail_img{
        width: 32px;
        height: 32px;
        background-image: url("./../static/images/home/patent.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .aboutus_detail_img_pantent{
        background-image: url("./../static//images/home/team.png");
    }
    .aboutus_detail_img_operate{
        background-image: url("./../static//images/home/operate.png");
    }
    .aboutus_detail_img_good{
        background-image: url("./../static//images/home/good.png");
    }
    .aboutus_detail_title{
        font-size: 20px;
        font-family: "GlowSansTC_Light";
        font-weight: normal;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 8px;
    }
    .aboutus_spacing_font{
        font-size: 20px;
        font-family: "GlowSansTC_Medium";
        font-weight: normal;
        color: #333333;
    }
    .aboutus_spacing{
        width: 38px;
        height: 2px;
        background-color: #5A64F6;
    }
    .aboutus_detail_text{
        margin-top: 16px;
        font-size: 18px;
        font-family: "GlowSansTC_Light";
        font-weight: normal;
        color: #666666;
        line-height: 24px;
    }
    .aboutus_detail_second{
        width: 350px;
    }
}

.back_to_top{
    background: url("./../static/images/home/backtotop.png") no-repeat center;
    background-size:cover;
    position: fixed;
    bottom: 368px;
    right: 0px;
    width: 48px;
    height: 48px;
}
